<template>
  <div>
        <el-row :gutter="20" :class="$style.header">
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">ID：</span>
            <el-input v-model="id" placeholder="请输入用户ID" style="width:55%" @keyup.enter.native="getTableDate"></el-input>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">类型：</span>
            <el-select clearable v-model="moren.type.value" style="width:55%;" placeholder="奖励类型">
              <el-option v-for="item in moren.type.options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">状态：</span>
            <el-select clearable v-model="moren.zt.value" style="width:55%;" placeholder="状态">
              <el-option v-for="item in moren.zt.options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="getTableDate(1)" style="width:25%;">搜索</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="capital"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="id"
            min-width="50">
          </el-table-column>
          <el-table-column
            prop="fuid"
            label="用户id"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="ftype"
            label="类型"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="fids"
            label="奖励ID"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="fbid"
            label="标的ID"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="ftzjlid"
            label="投资记录ID"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="fzt"
            label="状态"
            min-width="100">
            <template slot-scope="scope">
              <span v-html="scope.row.fzt"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="tdate"
            label="锁定时间"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="tjhsj"
            label="激活时间"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="ftze"
            label="投资额"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="fiszd"
            label="投资类型"
            min-width="100">
            <template slot-scope="scope">
              <span v-html="scope.row.fiszd"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="fiszd"
            label="投资类型"
            min-width="100">
            <template slot-scope="scope">
              <span @click="redPacketHandle(scope.row.fids)" v-if="scope.row.ftype === '红包'" :class="$style.click">查看红包</span>
              <span @click="xjqHandle(scope.row.fids)" v-if="scope.row.ftype === '现金券'" :class="$style.click">查看现金卷</span>
              <span @click="jxqHandle(scope.row.fids)" v-if="scope.row.ftype === '加息券'" :class="$style.click">查看加息券</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 30px 0;">
          <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
        </div>
        <el-dialog title="红包" :visible.sync="redPacket.dialog">
          <el-row :gutter="20">
            <el-col :span="8">
              红包id: <el-input v-model="redPacket.id" placeholder="请输入用户名" style="width:71%" @keyup.enter.native="redPacketSearch"></el-input>
            </el-col>
            <el-col :span="8">
              <el-select v-model="redPacket.type.value" placeholder="请选择">
                <el-option v-for="item in redPacket.type.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="redPacketSearch(1)">搜索</el-button>              
            </el-col>
          </el-row>
          <el-table
            :data="redPacket.capital"
            border
            style="width: 100%;margin-top: 30px;">
            </el-table-column>
            <el-table-column v-for="(item,index) in redPacket.capitalTit" :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.width">
            </el-table-column>
          </el-table>
          <div style="margin: 30px 0;">
            <el-pagination
            @current-change="redPacketCurrentChange"
            :page-size="redPacket.pageSize"
            layout="prev, pager, next, jumper"
            :total="redPacket.total">
            </el-pagination>
          </div>
        </el-dialog>
        <el-dialog title="现金券" :visible.sync="xjq.dialog">
          <el-row :gutter="20">
            <el-col :span="6">
              用户id: <el-input v-model="id" placeholder="请输入用户id" style="width:71%" @keyup.enter.native="xjqSearch"></el-input>
            </el-col>
            <el-col :span="5">
              券id: <el-input v-model="xjq.id" placeholder="请输入券id" style="width:71%" @keyup.enter.native="xjqSearch"></el-input>
            </el-col>
            <el-col :span="5">
              <el-select v-model="xjq.quan.value" placeholder="现金券类型">
                <el-option v-for="item in xjq.quan.options" :key="item.value" :label="item.cdes" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-select v-model="xjq.type.value" placeholder="激活状态">
                <el-option v-for="item in xjq.type.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="xjqSearch(1)">搜索</el-button>              
            </el-col>
          </el-row>
          <el-table
            :data="xjq.capital"
            border
            style="width: 100%;margin-top: 30px;">
            </el-table-column>
            <el-table-column v-for="(item,index) in xjq.capitalTit" :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.width">
            </el-table-column>
          </el-table>
          <div style="margin: 30px 0;">
            <el-pagination
            @current-change="xjqCurrentChange"
            :page-size="xjq.pageSize"
            layout="prev, pager, next, jumper"
            :total="xjq.total">
            </el-pagination>
          </div>
        </el-dialog>
        <el-dialog title="加息券" :visible.sync="jxq.dialog">
          <el-row :gutter="20">
            <el-col :span="8">
              用户id: <el-input v-model="id" placeholder="请输入用户id" style="width:71%" @keyup.enter.native="jxqSearch"></el-input>
            </el-col>
            <el-col :span="8">
              券id: <el-input v-model="jxq.id" placeholder="请输入券id" style="width:71%" @keyup.enter.native="jxqSearch"></el-input>              
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="jxqSearch(1)">搜索</el-button>              
            </el-col>
          </el-row>
          <el-table
            :data="jxq.capital"
            border
            style="width: 100%;margin-top: 30px;">
            </el-table-column>
            <el-table-column v-for="(item,index) in jxq.capitalTit" :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.width">
            </el-table-column>
          </el-table>
          <div style="margin: 30px 0;">
            <el-pagination
            @current-change="jxqCurrentChange"
            :page-size="jxq.pageSize"
            layout="prev, pager, next, jumper"
            :total="jxq.total">
            </el-pagination>
          </div>
        </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id:this.$route.params.id,
      capitalTit:[{
          prop:'id',
          label:'id',
          width: '100'
        },{
          prop:'fuid',
          label:'用户id',
          width: '100'
        },{
          prop:'ftype',
          label:'类型',
          width: '100'
        },{
          prop:'fids',
          label:'奖励ID',
          width: '120'
        },{
          prop:'fbid',
          label:'标的ID',
          width: '100'
        },{
          prop:'ftzjlid',
          label:'投资记录ID',
          width: '200'
        },{
          prop:'fzt',
          label:'状态',
          width: '200'
        },{
          prop:'tdate',
          label:'锁定时间',
          width: '200'
        },{
          prop:'tjhsj',
          label:'激活时间',
          width: '100'
        },{
          prop:'ftze',
          label:'投资额',
          width: '180'
        },{
          prop:'fiszd',
          label:'投资类型',
          width: '100'
        }
      ],
      capital:[],
      moren:{
        type:{
          value:'',
          options:[
            {
              label: '红包',
              value: 1,
            },
            {
              label: '现金券',
              value: 2,
            },
            {
              label: '加息券',
              value: 3,
            }
          ]
        },
        zt:{
          value:'',
          options:[
            {
              label: '未激活',
              value: 0,
            },
            {
              label: '已激活',
              value: 1,
            }
          ]
        },
      },
      redPacket: {
        dialog: false,
        id: '',
        type: {
          value: 1,
          options:[{
            label:'可用红包',
            value: 1
          },{
            label:'已用红包',
            value: 2
          },{
            label:'过期红包',
            value: 3
          }]
        },
        total: 0,
        pageSize: 10,
        capitalTit:[{
            prop:'cSm',
            label:'红包说明',
            width: '100'
          },{
            prop:'fJe',
            label:'红包金额',
            width: '100'
          },{
            prop:'fLx',
            label:'红包类型',
            width: '100'
          },{
            prop:'tDate',
            label:'领取时间',
            width: '120'
          },{
            prop:'fDqsj',
            label:'到期时间',
            width: '100'
          }
        ],
        capital:[],
      },
      xjq:{
        dialog: false,
        id: '',
        type: {
          value: '',
          options:[{
            label:'已激活',
            value: 1
          },{
            label:'未激活',
            value: 2
          }]
        },
        quan: {
          value: '',
          options:[]
        },
        total: 0,
        pageSize: 20,
        capitalTit:[{
            prop:'id',
            label:'id',
            width: '100'
          },{
            prop:'fuid',
            label:'用户ID',
            width: '100'
          },{
            prop:'ffxje',
            label:'返现金额',
            width: '100'
          },{
            prop:'ftze',
            label:'要求投资额',
            width: '120'
          },{
            prop:'fqx',
            label:'要求期限',
            width: '100'
          },{
            prop:'tdate',
            label:'获取时间',
            width: '100'
          },{
            prop:'tgqsj',
            label:'过期时间',
            width: '100'
          },{
            prop:'tjhsj',
            label:'激活时间',
            width: '100'
          },{
            prop:'fzt',
            label:'是否已激活',
            width: '100'
          },{
            prop:'csm',
            label:'类型说明',
            width: '100'
          },{
            prop:'flx',
            label:'类型ID',
            width: '100'
          },{
            prop:'ftzjlid',
            label:'投资记录ID',
            width: '100'
          }
        ],
        capital:[],
      },
      jxq: {
        dialog: false,
        id: '',
        total: 0,
        pageSize: 10,
        capitalTit:[{
            prop:'id',
            label:'id',
            width: '100'
          },{
            prop:'fuid',
            label:'用户ID',
            width: '100'
          },{
            prop:'csm',
            label:'加息券名称',
            width: '100'
          },{
            prop:'fjxbl',
            label:'加息比率',
            width: '120'
          },{
            prop:'fjxlb',
            label:'加息类别',
            width: '100'
          },{
            prop:'isday',
            label:'加息属性',
            width: '100'
          },{
            prop:'tdate',
            label:'发放时间',
            width: '100'
          },{
            prop:'tdqsj',
            label:'到期时间',
            width: '100'
          },{
            prop:'tjhsj',
            label:'激活时间',
            width: '100'
          },{
            prop:'ftze',
            label:'要求投资额',
            width: '100'
          },{
            prop:'fqx',
            label:'要求期限',
            width: '100'
          },{
            prop:'fbid',
            label:'标ID',
            width: '100'
          },{
            prop:'ftzjlid',
            label:'投资记录ID',
            width: '100'
          }
        ],
        capital:[],
      },
      total: 0,
      pageSize: 10,
    }
  },
  methods: {
    //获得现金券类型
    getquan () {
      this.$get(this,{api:'member/xjqType.do',data: {
      }
      }).then(({data})=>{
        if (data.state === 0) {
          this.xjq.quan.options = data.content;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    redPacketHandle (fids) {
      this.redPacket.dialog = true;
      this.redPacket.id = fids;
      this.redPacketCurrentChange();
    },
    xjqHandle (fids) {
      this.xjq.dialog = true;
      this.xjq.id = fids;
      this.xjqSearch();
    },
    jxqHandle (fids) {
      this.jxq.dialog = true;
      this.jxq.id = fids;
      this.jxqSearch();
    },
    handleCurrentChange(val) {
       this.getTableDate(val)
    },
    redPacketCurrentChange(val) {
       this.redPacketSearch(val)
    },
    xjqCurrentChange(val) {
       this.getTableDate(val)
    },
    jxqCurrentChange(val) {
       this.getTableDate(val)
    },
    getTableDate (page=1) { 
      this.$get(this,{api:'member/jlxz.do',data: {
        fuid:this.id,
        type: this.moren.type.value,
        zt: this.moren.zt.value,
        pageSize: this.pageSize,
        page
      }
      }).then(({data})=>{
        if (data.state === 0) {
          this.total = data.content.num;
          this.capital = data.content.data;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    redPacketSearch(page=1) {
      this.$get(this,{api:'member/hongBao.do',data: {
        fuid:this.id,
        hb: this.redPacket.type.value,
        id: this.redPacket.id,
        pageSize: this.redPacket.pageSize,
        page
      }
      }).then(({data})=>{
        if (data.state === 0) {
          this.redPacket.total = data.content.num;
          this.redPacket.capital = data.content.data;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    xjqSearch(page=1) {
      console.log(this.xjq.id+'2017.12.25')
      this.$get(this,{api:'member/xjq.do',data: {
        fuid:this.id,
        flx: this.xjq.quan.value,
        fzt: this.xjq.type.value,
        id: this.xjq.id,
        pageSize: this.redPacket.pageSize,
        page
      }
      }).then(({data})=>{
        if (data.state === 0) {
          this.xjq.total = data.content.num;
          this.xjq.capital = data.content.data;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    jxqSearch(page=1) {
      this.$get(this,{api:'member/jxq.do',data: {
        fuid:this.id,
        id: this.jxq.id,
        pageSize: this.redPacket.pageSize,
        page
      }
      }).then(({data})=>{
        if (data.state === 0) {
          this.jxq.total = data.content.num;
          this.jxq.capital = data.content.data;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    }
  },
  mounted () {
    this.getTableDate();
    this.getquan();
  }
}
</script>
<style lang="scss" module>
.header {
  font-size: 14px;
  padding-bottom: 20px;
}
.click {
  color: #5394fc;
  text-decoration: underline;
  cursor: pointer;
}
</style>



